<template>
  <div v-loading="loading" class="app-container">
    <head-tool class="head-tool">
      <template #right>
        <el-button type="primary" @click="addPermission(1, '0')">
          <i class="el-icon-plus" />
          <span>添加权限</span>
        </el-button>
      </template>
    </head-tool>
    <el-card>
      <el-empty v-if="tableData.length == 0" description="暂无数据" />
      <el-table v-else :data="tableData" border row-key="id" style="width: 100%">
        <el-table-column align="center" prop="name" label="名称" />
        <el-table-column align="center" prop="code" label="标识" />
        <el-table-column align="center" prop="description" label="描述" />
        <el-table-column align="center" prop="enVisible" label="状态" width="140">
          <template v-slot="{ row }">
            <el-switch v-model="row.enVisible" :width="20" active-color="#13ce66" active-value="1" active-text="启用" inactive-color="#ff4949" inactive-value="0" inactive-text="禁用" disabled />
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template v-slot="{ row }">
            <el-link v-if="row.pid == 0" type="primary" @click="addPermission(2, row.id)">添加</el-link>
            <el-link type="primary" class="edit" @click="doEdit(row.id)">编辑</el-link>
            <el-link type="primary" @click="doDel(row.id)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :title="form.id ? '编辑权限' : '新建权限'" :visible.sync="showAddDialog" :show-close="false" @close="close">
        <el-form ref="form" v-loading="loading" :model="form" :rules="rules" label-width="80px">
          <el-form-item prop="name" label="权限名称">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item prop="code" label="权限标识">
            <el-input v-model="form.code" />
          </el-form-item>
          <el-form-item prop="description" label="权限描述">
            <el-input v-model="form.description" />
          </el-form-item>
          <el-form-item label="状态">
            <el-switch v-model="form.enVisible" active-color="#13ce66" active-value="1" active-text="启用" inactive-color="#ff4949" inactive-value="0" inactive-text="禁用" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="showAddDialog = false">取 消</el-button>
          <el-button :loading="loading" type="primary" @click="save">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { getPermissionList, addPermission, getPermissionDetail, updatePermission, removePermission } from '@/api/permission'
import { arrayToTree } from '@/utils'
export default {
  name: 'Permission',
  data() {
    return {
      tableData: [],
      showAddDialog: false,
      loading: false,
      form: {
        name: '',
        code: '',
        description: '',
        enVisible: '0',
        type: '',
        pid: ''
      },
      rules: {
        name: [{ required: true, message: '请输入权限名称', trigger: 'blur' }],
        code: [{ required: true, message: '请输入权限标识', trigger: 'blur' }],
        description: [{ required: true, message: '请输入权限描述', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    async loadData() {
      this.loading = true
      const result = await getPermissionList()
      this.tableData = arrayToTree(result.data, '0')
      this.loading = false
    },
    save() {
      this.$refs.form.validate(async v => {
        this.loading = true
        if (v) {
          this.form.id ? await updatePermission(this.form) : await addPermission(this.form)
          this.showAddDialog = false
          this.loadData()
        }
        this.loading = false
      })
    },
    addPermission(type, pid) {
      this.form.type = type
      this.form.pid = pid
      this.showAddDialog = true
    },
    close() {
      this.$refs.form.resetFields()
      this.form = {}
      this.showAddDialog = false
    },
    async doEdit(id) {
      this.loading = true
      const result = await getPermissionDetail(id)
      this.form = result.data
      this.loading = false
      this.showAddDialog = true
    },
    doDel(id) {
      this.$confirm('确认要删除此权限点吗？', '提示', {
        center: true,
        closeOnClickModal: false,
        showClose: false,
        type: 'info'
      }).then(async() => {
        await removePermission(id)
        this.loadData()
      }).catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.head-tool {
  margin-bottom: 20px;
}
.edit {
  margin: 0 20px;
}
::v-deep .el-dialog {
  border-radius: 10px;
  .el-dialog__header {
    background: linear-gradient(to right, #3e6ef8, #5b8cff);
    border-radius: 10px 10px 0 0;
  }
  .el-dialog__body {
    text-align: center;
    .el-form {
      .el-form-item:last-child {
        .el-form-item__content {
          text-align-last: left;
          .el-switch {
            margin-left: 10px;
          }
        }
      }
    }
  }
}
</style>
